<template>
	<u-form :model="addr" ref="uForm" :error-type="errorType">
		<view class="top">
			<u-form-item left-icon="account" label-width="180" label="收货人" prop="name">
				<u-input v-model="addr.name" placeholder="请填写收货人姓名" />
			</u-form-item>
			<u-form-item left-icon="phone" label-width="180" label="手机号码" prop="phone">
				<u-input v-model="addr.phone" placeholder="请填写收货人手机号" />
			</u-form-item>
			<!-- <view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" placeholder-class="line" v-model="addr.name" placeholder="省市区县、乡镇等" />
			</view> -->
			<u-form-item label-width="180" left-icon="map" label="所在地区" prop="region">
				<u-input type="select" :select-open="pickerShow" v-model="addr.region" 
					placeholder="请选择地区" @click="pickerShow = true">
				</u-input>
			</u-form-item>
			<u-form-item label-width="180" left-icon="order" label="详细地址" prop="address">
				<u-input type="textarea" placeholder="请填写详细地址,如街道、楼牌等" v-model="addr.address" />
			</u-form-item>
			<!-- 此处switch的slot为right，如果不填写slot名，也即<u-switch v-model="model.remember"></u-switch>，将会左对齐 -->
			<u-form-item label-width="180" left-icon="bookmark" label="设为默认" prop="is_default">
				<u-switch v-model="addr.is_default" active-color="red" slot="right"></u-switch>
			</u-form-item>
		</view>
		<view class="addSite" @tap="submit">
			<view class="add">
				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>{{addr.id == '' ? '确认添加' : '确认修改'}}
			</view>
		</view>
		<!-- <u-picker mode="region" ref="uPicker" v-model="pickerShow" /> -->
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
	</u-form>
</template>

<script>
	export default {
		onLoad(options) {
			if(options.id){
				this.addr.id = options.id;
				this.getData()
			}
		},
		data() {
			return {
				errorType: ['message'],
				addr: {
					id: '',
					name: '',
					phone: '',
					region: '',
					province: '',
					city: '',
					county: '',
					address: '',
					is_default: false
				},
				rules: {
					name: [
						{
							required: true,
							max: 10,
							message: '请输入收货人',
							trigger: ['change','blur'],
						},
					],
					region: [
						{
							required: true,
							message: '请选择地区',
							trigger: ['change','blur'],
						}
					],
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
				},
				pickerShow: false,
			}
		},
		methods: {
			async getData(){
				if(this.addr.id != ''){
					const addrResp = await this.$u.api.addressDetail(this.addr.id);
					this.addr.name = addrResp.name,
					this.addr.phone = addrResp.phone,
					this.addr.province = addrResp.province,
					this.addr.city = addrResp.city,
					this.addr.county = addrResp.county,
					this.addr.address = addrResp.address,
					this.addr.is_default = addrResp.is_default == 1 ? true : false,
					this.addr.region = addrResp.province + '-' + addrResp.city + '-' + addrResp.county;
				}
			},
			// 选择地区回调
			regionConfirm(e) {
				this.addr.province = e.province.label;
				this.addr.city = e.city.label;
				this.addr.county = e.area.label;
				this.addr.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			submit(){
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						const params = {
							name: this.addr.name,
							phone: this.addr.phone,
							province: this.addr.province,
							city: this.addr.city,
							county: this.addr.county,
							address: this.addr.address,
							is_default: this.addr.is_default ? 1 : 0
						};
						if(this.addr.id != ''){
							params.id = this.addr.id;
							await this.$u.api.addressUpdate(params);
							this.$u.toast('修改成功');
						}else{
							await this.$u.api.addressAdd(params);
							this.$u.toast('添加成功');
						}
						
						setTimeout(() => {
							this.$u.route({
								type: 'navigateBack',
								url: 'pages/address/address'
							})
						}, 1500)
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.top{
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
	}
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;
		.add{
			display: flex;
			align-items: center;
			color: #ffffff;
			.icon{
				margin-right: 10rpx;
			}
		}
	}

</style>
